<template>
  <div style="height: 100%;">
    <index-aside v-if="'vertical' == 'vertical'"
                 :style='{"boxShadow":"6px 0 6px #ddd","padding":"64px 0 60px","overflow":"hidden","top":"0","left":"0","background":"#3f3f3f","bottom":"0","width":"200px","fontSize":"0px","position":"fixed","height":"100%","zIndex":"1001"}'></index-aside>
    <el-main
        :style='"vertical" == "vertical" ? {"minHeight":"100%","padding":"0","margin":"0 0 0 200px","position":"relative","background":"#fff","display":"block"} : {"minHeight":"100%","margin":"0","position":"relative"}'>
      <index-header
          :style='{"boxShadow":"0 0px 0px rgba(0, 0, 0, .3)","padding":"0 20px 0","borderColor":"#ddd","alignItems":"center","display":"flex","justifyContent":"center","top":"0","borderRadius":"0px","left":"200px","background":"#339933","borderWidth":"0 0 1px","width":"calc(100% - 200px)","position":"fixed","borderStyle":"solid","zIndex":"1","height":"64px"}'></index-header>
      <index-aside v-if="'vertical' == 'horizontal'"
                   :style='{"width":"100%","borderColor":"#efefef","borderStyle":"solid","background":"#304156","borderWidth":"0 0 1px 0","height":"auto"}'></index-aside>
      <bread-crumbs :title="title"
                    :style='{"padding":"8px 15px","margin":"64px 0 0","borderColor":"#eee","borderRadius":"0","borderWidth":"0 0 1px 0","background":"#e5efe5","width":"calc(100% - 0px)","borderStyle":"solid","height":"auto"}'
                    class="bread-crumbs"></bread-crumbs>
      <router-view class="router-view"></router-view>
    </el-main>
  </div>
</template>

<script>
import IndexAside from '@/components/index/IndexAsideStatic'
import IndexHeader from '@/components/index/IndexHeader'
import menu from "@/utils/menu";

export default {
  components: {
    IndexAside,
    IndexHeader
  },
  data() {
    return {
      menuList: [],
      role: "",
      currentIndex: -2,
      itemMenu: [],
      title: ''
    };
  },
  mounted() {
    let menus = menu.list();
    this.menuList = menus;
    this.role = this.$storage.get("role");
  },
  created() {
    this.init();
    console.log(console.log(this.$route.path))
  },
  methods: {
    init() {
      this.$nextTick(() => {

      })
    },
    menuHandler(menu) {
      this.$router.push({
        name: menu.tableName
      });
      this.title = menu.menu;
    },
    titleChange(index, menus) {
      this.currentIndex = index
      this.itemMenu = menus;
      console.log(menus);
    },
    homeChange(index) {
      this.itemMenu = [];
      this.title = ""
      this.currentIndex = index
      this.$router.push({
        name: 'home'
      });
    },
    centerChange(index) {
      this.itemMenu = [{
        "buttons": ["新增", "查看", "修改", "删除"],
        "menu": "修改密码",
        "tableName": "updatePassword"
      }, {
        "buttons": ["新增", "查看", "修改", "删除"],
        "menu": "个人信息",
        "tableName": "center"
      }];
      this.title = ""
      this.currentIndex = index
      this.$router.push({
        name: 'home'
      });

    }
  }
};
</script>
<style lang="scss" scoped>
a {
  text-decoration: none;
  color: #555;
}

a:hover {
  background: #00c292;
}

.el-main {
  padding: 0;
  display: block;
}

.nav-list {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  margin-top: 20px;

  .nav-title {
    display: inline-block;
    font-size: 15px;
    color: #333;
    padding: 15px 25px;
    border: none;
  }

  .nav-title.active {
    color: #555;
    cursor: default;
    background-color: #fff;
  }
}

.nav-item {
  margin-top: 20px;
  background: #FFFFFF;
  padding: 15px 0;

  .menu {
    padding: 15px 25px;
  }
}

.detail-form-content {
  background: transparent;
}
</style>
